<template>
    <div class="container">
        <header>
            <div class="logo">
                <a class="logo-icon">
                    <img src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
                        alt="logo">
                </a>
                <a href="*" class="openApp">
                    打开APP
                </a>
            </div>
            <router-link to="/search" class="search">
                <div>
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                    搜索
                </div>
            </router-link>
        </header>
        <div class="content">
            <!-- 轮播 -->
            <el-carousel indicator-position="none" height="130px">
                <el-carousel-item v-for="item in 4" :key="item">
                    <img src="http://fdfs.xmcdn.com/storages/1209-audiofreehighqps/98/D4/GKwRIUEIvd_dAAJQTAJPJJDf.jpg"
                        alt="">
                </el-carousel-item>
            </el-carousel>
            <!-- 图标 -->
            <div class="tomatoes">
                <div class="cate-wrap">
                    <router-link to="/ranklist" class="cate-box">
                        <img src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png" alt="">
                        <p>排行榜</p>
                    </router-link>
                    <router-link to="/category" class="cate-box">
                        <img src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png" alt="">
                        <p>分类</p>
                    </router-link>
                    <router-link to="/listening" class="cate-box">
                        <img src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png" alt="">
                        <p>听单</p>
                    </router-link>
                </div>
            </div>
            <!-- 立即下载 -->
            <a href="#" class="amid-banner">
                <img src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="">
            </a>
            <!-- 新人必听 -->
            <div class="card">
                <div class="album-title">新人必听</div>
                <div class="album-list">
                    <cardItem v-for="(item, index) in albumList" :key="index" :albumItem="item"></cardItem>
                </div>
            </div>
            <!-- 限时免费 -->
            <div class="card">
                <div class="album-title">
                    限时免费
                    <span class="count-down">
                        <van-count-down :time="time">
                            <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </span>
                </div>
                <div class="album-hot-wrapper">
                    <div class="wrapper-item">
                        <cardItem v-for="(item, index) in albumList1" :key="index" :albumItem="item"></cardItem>
                    </div>
                </div>
            </div>
            <!-- 推荐 -->
            <div class="recommend">
                <recommend type="hot" :recommend="hotTracks"></recommend>
                <recommend type="podcast" :recommend="limitedFreeAlbum"></recommend>
            </div>
            <!-- 底部 -->
            <footer>
                <img class="background"
                    src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
                    alt="">
                <div class="footer-logo">
                    <img src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
                        alt="">
                    <p>© 2014-2024 喜马拉雅 版权所有</p>
                </div>
            </footer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import cardItem from '../../components/card-item/index.vue'
import recommend from '../../components/recommend/index.vue'
import { reqGetAlbums, reqGetRecommend } from '../../api/home'
import { onMounted, ref } from 'vue'

/* 定义响应式数据 */
const albumList = ref([])
const albumList1 = ref([])
const hotTracks = ref([])
const limitedFreeAlbum = ref([])
const time = ref(30 * 60 * 60 * 1000);
/* 声明周期 */
onMounted(() => {
    getAlbums();
    getRecommend();
})

/* 功能函数 */
async function getAlbums() {
    try {
        const result = await reqGetAlbums({ pageNum: 1, pageSize: 6 });
        const result1 = await reqGetAlbums({ pageNum: 2, pageSize: 6 });
        if (result.ret == 200) {
            albumList.value = result.data.albums
            albumList1.value = result1.data.albums
        }
    } catch (error) {
        console.log(error);
    }
}

async function getRecommend() {
    try {
        const result = await reqGetRecommend();
        if (result.code == 0) {
            hotTracks.value = result.data.hotTrack.hotTracks
            limitedFreeAlbum.value = result.data.limitedFreeAlbum.limitedTimeFreeAlbums
        }
    } catch (error) {
        console.log(error);
    }
}
</script>

<style scoped>
a {
    text-decoration: none;
}

.container {
    width: 100%;
}

/* 头部 */
.logo {
    padding: 15px 15px 15px 15px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.logo-icon img {
    width: 116px;
    height: 29px;
}

.openApp {
    width: 80px;
    height: 30px;
    vertical-align: baseline;
    border-radius: 15px;
    text-align: center;
    font-weight: 400;
    background-color: #fa2800;
    text-decoration: none;
    color: #fff;
    line-height: 30px;
    font-size: 14px;
    padding: 0 5px;
}

.search {
    width: 100%;
    text-decoration: none;
    font-size: 12px;
    color: #ababab;
}

.search div {
    margin: 0 15px;
    padding-left: 10px;
    height: 30px;
    display: inline-block;
    background-color: #eff1f4;
    border-radius: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* 轮播图 */
.swiper {
    width: 100%;
    height: 130px;
}

.el-carousel__item img {
    width: 100%;
    height: 100%;
}

/* 分类 */
.tomatoes {
    width: 100%;
    height: 53px;
    margin-top: 25px;
}

.cate-wrap {
    padding: 0 34px;
    display: flex;
    justify-content: space-around;
}

.cate-box img {
    width: 34px;
    height: 34px;
}

.cate-box p {
    margin-top: -3px;
    font-size: 12px;
    height: 17px;
    line-height: 17px;
    color: #666;
    text-align: center;
}

/* 立即下载 */
.amid-banner img {
    margin-top: 20px;
    width: 100%;
    height: 81px;
    margin-bottom: 4px;
}

/* 新人必听 */
.album-title {
    font-size: 18px;
    color: #40404c;
    margin: 17px;
    font-weight: 700;
}

.album-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* 限时免费 */
.album-title {
    display: flex;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: black;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    background-color: #fa2800;
}


.album-hot-wrapper {
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: none;
}

.wrapper-item {
    width: 700px;
    display: flex;
    justify-content: space-around;
}

.album-hot-wrapper::-webkit-scrollbar {
    width: 0;
}

/* 底部 */
footer {
    height: 180px;
    width: 100%;
    position: relative;
}

footer .background {
    height: 100%;
    width: 100%;
    margin-bottom: -5px;
}

.footer-logo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    text-align: center;
}

.footer-logo img {
    margin-top: 45px;
    width: 102px;
    height: 36px;
}

.footer-logo p {
    font-size: 12px;
    line-height: 16px;
    color: gray;
    margin-top: 15px;
}
</style>